<template>
	<view>
		<view class="indexTop"></view>
		<view class="content">
			<view class="subheading">
				<img src="../../static/imgs/tip.png" >
				已接收任务
			</view>
			<view class="contentList" v-for="item in dataList" @click="toDetails(item.id)">
				<view class="contentListTop">
					<view class="contentListtitle">
					{{item.title}}
					</view>
					<view class="contentListstate">
						<span style="background: #d9001b;" v-if="item.state == '1'">待接收</span>
						<span style="background: #fe7a21;" v-else-if="item.state == '2'">待完成</span>
						<span style="background: #137a29;" v-else>已完成</span>
					</view>
				</view>
				<view class="contentListTime">
					事发时间：{{item.time}}
				</view>
			</view>
		</view>
		<view v-if="showdialog" class="showDialog">
			<view class="boxWc">
				<view class="notification">
					<view class="notificationText">{{showText}}</view>
					<view class="notificationBut">
						<span @click="hideDialog">确定</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		components: {
		},
		data() {
			return {
				showdialog:true,
				showText:'您有一条任务待接收，请及时查看',
				dataList:[
					{id:'123456', title:'标题1', time:'2023-02-08', state:'1'},
					{id:'561615', title:'标题2', time:'2023-06-08', state:'2'},
					{id:'496166', title:'标题3', time:'2023-02-09', state:'3'},
				]
			};
		},
		computed: {},
		onLoad() {
			this.showTipDialong()
		},
		onUnload() {},
		onShow() {},
		methods: {
			toDetails(id){
				uni.navigateTo({
				  url: '/pages/policeEnd/details',
				  success: function(res) {
				    uni.$emit('eventName', { uid: id }); 
				  }
				});
			},
			showTipDialong(){
				
			},
			hideDialog(){
				this.showdialog = false
			}
		}
	}
</script>

<style lang="scss">
	.indexTop{width: 100%; height: 350rpx; background: url('../../static/imgs/headbg.png') no-repeat; background-size: 100% 100%; position: relative;	}
	.content{margin-top: 100rpx; padding: 0 25rpx;
		.subheading{
			position: relative;
			padding-left: 10rpx;
			font-size: 33rpx;
			font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
			font-weight: 650;
			letter-spacing: 1px;
			img{
				position: absolute;
				left: -10rpx;
				height: 45rpx;
				z-index: -1;
			}
		}
		.contentList{ margin-top: 30rpx; padding: 0 20rpx;
			.contentListTop{display: flex; align-items: center; margin-bottom: 20rpx;
				.contentListtitle{
					width: calc(100% - 120rpx);
					font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
					font-weight: 650;
					font-size: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.contentListstate{width: 120rpx;
					span{padding: 5rpx 15rpx; color: #ffffff; border-radius: 10rpx;}
				}
			}
			.contentListTime{
				font-size: 28rpx;
				color: #959CA6;
			}
		}
	}
	.showDialog{position: fixed; top: 0; width: 100%; height: 100%; z-index: 9999;
		.boxWc{position: relative; width: 100%; height: 100%;
			.notification{display: flex; align-items: center; justify-content: center; flex-flow: column; position: absolute; left: 30rpx; top: calc(50% - 225rpx); height: 450rpx; width: calc(100% - 60rpx); background: #ffffff; border-radius: 15rpx; box-shadow:2px 2px 5px rgba(0, 0, 0, 0.349019607843137);
				.notificationText{font-size: 40rpx;}
				.notificationBut{ margin-top: 120rpx;
					span{padding: 30rpx 100rpx; border-radius: 15rpx; color: #ffffff; font-size: 35rpx; background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, rgba(46, 127, 243, 1) 100%);}
				}
			}
		}
	}
</style>